<template>
    <div>
        <Bread title="Report management / Query Customer Relationship"/>
        <el-row :gutter="40">
            <el-col :span="13">
                <el-card shadow="never" style="height: 240px" class="form-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Condition</span>
                    </div>
                    <el-form ref="searchRelationForm"
                             :model="searchRelationForm"
                             :rules="searchRelationRules"
                             size="small"
                             label-width="100px"
                             label-position="left">
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label-width="150px" label="Customer Name" prop="customerName">
                                <el-input v-model="searchRelationForm.customerName" placeholder="Please input customer name" clearable :style="{width: '90%'}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Customer Id" prop="customerId">
                                <el-input v-model="searchRelationForm.customerId" placeholder="Please input customer ID" clearable :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label-width="140px" label="Sales Department" prop="customerMgrDept">
                                <el-select v-model="searchRelationForm.customerMgrDept" placeholder="Please choose sales department" filterable clearable
                                           :style="{width: '90%'}">
                                    <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index" :label="item.label"
                                               :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label-width="150px" label="Customer Manager" prop="customerMgrName">
                                <el-select v-model="searchRelationForm.customerMgrName" placeholder="Please choose customer manager" filterable clearable
                                           :style="{width: '120%'}">
                                    <el-option v-for="(item, index) in options.customerMgrNameOptionsStr" :key="index" :label="item.label"
                                               :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-form-item size="large" style="float: right">
                            <el-button type="primary" icon="el-icon-search" size="medium" @click="submitSearch()"> Search </el-button>
                            <el-button @click="resetSearch()">Reset</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card class="table-card" style="height: 500px">
                    <div slot="header">
                        <span style="font-weight: bold">Query Condition of Relationship</span>
                        <el-button size="medium"
                                   style="float: right; " @click="export2Excel">Export
                        </el-button>
                    </div>

                    <el-form ref="searchRelationResultForm"
                             :model="searchRelationResultForm"
                             size="medium"
                             label-width="150px"
                             label-position="left">
                        <el-row type="flex" justify="start" align="top" >
                            <el-form-item   label="Customer Name" prop="customerName">
                                <el-input v-model="searchRelationResultForm.customerName" disabled :style="{width: '90%'}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Customer ID" prop="customerId">
                                <el-input v-model="searchRelationResultForm.customerId" disabled :style="{width: '90%'}">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label="Sales Department" prop="customerMgrDept">
                                <el-input v-model="searchRelationResultForm.customerMgrDept" disabled
                                          :style="{width: '90%'}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Customer Manager" prop="customerMgrName">
                                <el-input v-model="searchRelationResultForm.customerMgrName" disabled
                                          :style="{width: '90%'}">
                                </el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <span>Query Result of Contacts</span>

                    <el-table
                        id="customerContactsTable"
                        :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                        :data="customerContactsTable"
                              ref="customerContactsTable">
                        <el-table-column
                            prop="contactsName"
                            label="Name"
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="contactsDept"
                            label="Department"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="contactsPosition"
                            label="Position"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="contactsTelephone"
                            label="Telephone"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="contactsMobilephone"
                            label="Mobile Phone"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="contactsFax"
                            label="Fax"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="contactsEmail"
                            label="Email"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="contactsQq"
                            label="QQ"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="contactsWechat"
                            label="Wechat"
                            width="80">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card style="height: 250px" shadow="never" class="form-card" >
                    Customer List
                    <el-table    :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}" :data="customerTable" height="250">
                        <el-table-column
                            prop="customerName"
                            label="Customer Name"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="customerCountry"
                            label="Country"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="customerCity"
                            label="City"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="customerMgrName"
                            label="Manager"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            label="Operation"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="primary" plain round
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="handSelect(scope.$index, scope.row)">Examine
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card class="table-card">
                    <div slot="header">
                        <span style="font-weight: bold">Query Result of Related Customer</span>
                    </div>

                    <el-form ref="searchRelationResultForm"
                             :model="searchRelationResultForm"
                             size="medium"
                             label-width="150px"
                             label-position="left">
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label="Customer Name" prop="customerName">
                                <el-input v-model="searchRelationResultForm.customerName" disabled :style="{width: '80%'}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Customer ID" prop="customerId">
                                <el-input v-model="searchRelationResultForm.customerId" disabled :style="{width: '80%'}">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" justify="start" align="top">
                            <el-form-item label="Sales Department" prop="customerMgrDept">
                                <el-input v-model="searchRelationResultForm.customerMgrDept" disabled
                                          :style="{width: '80%'}">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="Customer Manager" prop="customerMgrName">
                                <el-input v-model="searchRelationResultForm.customerMgrName" disabled
                                          :style="{width: '80%'}">
                                </el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <span>Related Customer</span>

                    <el-table    :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}" :data="customerRelationshipTable"
                              ref="customerRelationshipTable">
                        <el-table-column
                            prop="relativeCustomerId2"
                            label="Relative Customer ID"
                            width="200">
                        </el-table-column>
                        <el-table-column
                            prop="relativeCustomerName"
                            label="Relative Customer Name"
                            width="200">
                        </el-table-column>
                        <el-table-column
                            prop="customerRelationName"
                            label="Customer Relation"
                            width="200">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Bread from "@/components/Bread/Bread";
import {options} from "@/data/const";
export default {
    name: "SearchCusRelation",
    components: {Bread},
    props: [],
    data() {
        return {
            options: options,
            searchRelationForm: {
                "customerName": null,
                "customerId": null,
                "customerMgrDept": null,
                "customerMgrName": null
            },

            searchRelationResultForm: {
                customerName: null,
                customerId: null,
                customerMgrDept: null,
                customerMgrName: null,
            },
            searchRelationRules: {},
            customerTable: [],
            contactSearch: {
                "customerId": 1,
                "customerName": null,
                "customerStatus": null,
                "customerCountry": null,
                "customerCity": null,
                "customerAddress": null,
                "postCode": null,
                "taxId": null,
                "taxType": null,
                "accountGroup": null,
                "enterpriseProperty": null,
                "enterpriseUrl": null,
                "annualSalesRevenue": null,
                "productType": null,
                "softwareBrand": null,
                "note": null
            },
            relationSearch:{
                "customerId": 1,
                "customerName": null,
                "customerStatus": null,
                "customerCountry": null,
                "customerCity": null,
                "customerAddress": null,
                "postCode": null,
                "taxId": null,
                "taxType": null,
                "accountGroup": null,
                "enterpriseProperty": null,
                "enterpriseUrl": null,
                "annualSalesRevenue": null,
                "productType": null,
                "softwareBrand": null,
                "note": null
            },
            customerContactsTable: [],
            customerRelationshipTable: [],
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        submitSearch() {
            this.$refs['searchRelationForm'].validate(valid => {
                if (!valid) return
                console.log(this.searchRelationForm)
                this.$axios.post("/customer/customer/queryCustomerRelationship", this.searchRelationForm).then(e =>{
                    if(e.data.status === 200){
                        this.customerTable = e.data.obj
                    }else{
                        this.customerTable = []
                    }
                    this.$message.success(e.data.msg)
                })
                // TODO 提交表单
            })
        },
        resetSearch() {
            this.$refs['searchRelationForm'].resetFields()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handSelect(index, row){
            this.searchRelationResultForm.customerId = row.customerId
            this.searchRelationResultForm.customerName = row.customerName
            this.searchRelationResultForm.customerMgrDept = row.customerMgrDept
            this.searchRelationResultForm.customerMgrName = row.customerMgrName
            let customerId = row.customerId
            this.contactSearch.customerId = customerId
            this.relationSearch.customerId = customerId

            this.$axios.post("/customer/customer/queryAllCustomerContacts", this.contactSearch).then(e => {
                console.log(e.data)
                if(e.data.status === 200){
                    this.$message.success(e.data.msg)
                    this.customerContactsTable = e.data.obj
                }else{
                    this.$message.success(e.data.msg)
                    this.customerContactsTable = []
                }
            })
            this.$axios.post("/customer/customer/queryAllCustomerRelationship", this.relationSearch).then(e => {
                console.log(e.data)
                if(e.data.status === 200){
                    this.$message.success(e.data.msg)
                    this.customerRelationshipTable = e.data.obj
                }else{
                    this.$message.success(e.data.msg)
                    this.customerRelationshipTable = []
                }
            })
        },
        export2Excel: function() {
            let tables = document.getElementById("customerContactsTable");
            let table_book = this.$XLSX.utils.table_to_book(tables);
            var table_write = this.$XLSX.write(table_book, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
            });
            try {
                this.$FileSaver.saveAs(
                    new Blob([table_write], { type: "application/octet-stream" }),
                    "customerContacts.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, table_write);
            }
            return table_write;
        },
    }
}
</script>

<style scoped>
.form-card {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
.table-card {
    width: 100%;
    margin-top: 20px;
    border-radius: 15px;
    height: 480px;
}
</style>